<template>
  <div class="storeInventory">
    <div class="head-wrap">
      <div class="head-search-item">
        <input
          ref="searchInput"
          type="search"
          v-model="postData.title"
          placeholder="请输入标题关键字"
          @keyup.enter="searchGoodsEvent">
        <div class="icon" @click="searchGoodsEvent">
          <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        </div>
      </div>
      <sort-search @item="sortSearchFn" :typeList="typeList" :listStyle="false"></sort-search>
    </div>
    <!-- 列表 -->
    <ul class="mlist-goods"
        v-show="list.length">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="loadMore">
        <li v-for="(item, index) in list"
            :key="index"
            class="list-goods">
          <section class="store-pic"
                   @click="goDetail(item.link)">
            <img v-if="item.is_compress"
                 :src="item.img_path+'180x180'">
            <img v-else
                 :src="item.img_path">
          </section>
          <section class="store-info">
            <h3 @click="goDetail(item.link)">
              <span class="fontZiy" v-if="item.is_self_support == 1">自营</span>
              {{item.title}}</h3>
            <p class="j-sale">库存:
              <span class="stock-del">{{item.store_num}}</span>
            </p>
            <div v-if="item.arr_sku.length" class="store-pop"
                 @click="showStoreSku(index)">库存详情
              <em class="down-icon"></em>
            </div>
          </section>
          <!-- 商品sku选择 -->
          <div class="pop-content"
               v-if="item.arr_sku.length"
               v-show="showSkuIndex == index">
            <div class="pop-content-detail"
                 v-for="(skuItem,skuIndex) in item.arr_sku"
                 :key="skuIndex">
              <div class="content-left">
                <p class="pop-content-detail-sku"
                   :data-sku="skuItem.sku_id">{{skuItem.skuname}}</p>
                <p class="text-con">库存:<span class="stock-del">{{skuItem.num}}</span></p>
              </div>
            </div>
          </div>
        </li>
      </van-list>
    </ul>
    <div class="no-data"
         v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import Scroll from '@/components/scroll/index'

import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)

import { GetStoreInventory } from '@/api/user/store/storeApi'
import sortSearch from '../../../item/itemList/listWrapper/sortSearch'
import { openPage } from '@/utils/utils'

export default Vue.extend({
  components: {
    noData,
    Scroll,
    sortSearch
  },
  data() {
    return {
      show: '',
      addImg:'https://img.wifenxiao.com/h5-wfx/images/user/add-num.png',
      minImg:'https://img.wifenxiao.com/h5-wfx/images/user/min-num.png',
      finished: false,
      loading: false,
      error: false,
      noData: {
        text: '暂无库存',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png',
        marginTop: '10em'
      },
      showSkuIndex: -1,
      list: [],
      num: 0,
      typeList: [
        { label: '库存', active: false, type: 1, prop: 'store', sort: '' }
      ],
      postData: {
        p: 1,
        title: '',
        store_num_order: 0
      }
    }
  },
  created() {
    this.init(this.postData)
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.loadMore()
    })
  },
  methods: {
    searchGoodsEvent() {
      this.finished = false
      this.postData.p = 1
      this.init(this.postData)
    },
    sortSearchFn(data) {
      if (data.prop == 'store') {
        this.postData.store_num_order = data.sort == 'ascending' ? 1 : 2
      }
      // TODO 排序搜索每次都重置为1
      this.finished = false
      this.postData.p = 1
      this.init(this.postData)
    },
    // 显示隐藏
    showStoreSku(index) {
      if (this.showSkuIndex == index) {
        this.showSkuIndex = -1
      } else {
        this.showSkuIndex = index
      }
    },
    init(postData) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.postData.p = 1
      GetStoreInventory(postData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.list = res.data.lists
          if (this.list.length < 10) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    loadMore() {
      if (this.postData.p == 1) {
        this.postData.p = 2
      }
      const param = Object.assign(this.postData, true)
      GetStoreInventory(param)
        .then(res => {
          this.loading = false
          const list = res.data.lists
          if (list.length) {
            this.list = this.list.concat(list)
            this.postData.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    },
    goDetail(url) {
      openPage(url)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/variables";
.storeInventory{
  .head-wrap{
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    padding: 30px 24px;
    background-color: #fff;
    .head-search-item{
      position: relative;
      width: calc(100% - 65px);
      height: 72px;
      font-size: 0;
      background: #f7f7f7;
      border-radius: 36px;
      input{
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        font-size: 24px;
        padding: 15px 70px;
        border: 0;
        background: transparent;
      }
      .icon{    
        position: absolute;
        top: 50%;
        left: 14px;
        height:32px;
        margin-right: 10px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        .img_search{
          width:28px;
          height:28px;
        }
      }
    }
    .sort-search{
      .sort-search-item {
        .type-txt{
          width: auto;
        }
      }
    }
  }
  .mlist-goods {
    margin: 20px 25px;
    .list-goods {
      background: #fff;
      padding:30px 25px;
      margin-bottom: 20px;
      overflow: hidden;
      border-radius: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .store-pic {
        float: left;
        width: 180px;
        height: 180px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .store-info {
        float: left;
        height: 180px;
        width: calc(100% - 180px);
        box-sizing: border-box;
        padding-left: 20px;
        h3 {
          @include lineClamp(28px, 36px, 2);
          height: 72px;
        }
        p {
          margin: 30px 0 20px;
          color: #666666;
          .stock-del {
            color: #F30C23;
          }
        }
        .store-pop {
          color: #666666;
          .down-icon {
            width: 16px;
            height: 9px;
            display: inline-block;
            vertical-align: middle;
            background: url(https://img.wifenxiao.com/h5-wfx/images/user/down.png) center/cover no-repeat;
            background-size: 100% auto;
          }
        }
      }
      .pop-content {
        // display: none;
        float: left;
        width: 100%;
        .pop-content-detail {
          margin-top: 15px;
          padding: 25px;
          background: #F7F7F7;
          overflow: hidden;
          border-radius: 10px;
          .content-left {
            float: left;
            width: 50%;
            min-height: 100px;
            text-align: left;
            .pop-content-detail-sku {
              margin-bottom: 10px;
              font-size: 26px;
              line-height: 38px;
            }
            .text-con {
              font-size: 24px;
              color: #666666;
              .stock-del {
                font-size: 28px;
                color: #F30C23;
              }
            }
          }
        }
      }
    }
  }
}
</style>